<template>
	<view class="myTask">
		<view class="my_task_item f f_column" v-for="(item,index) in myTask" :key="index">
			<view class="my_w_line f f_align f_align_center">
				<view class="f f_align_center">
					<view class="head_img radius f_shrink0">
						<image src="/static/logo.png" class="autoImg" mode=""></image>
					</view>
					<view class="f f_column f_align">
						<view class="bold re_name mb12 发/">{{item.jobEntity.title}}</view>
						<view class="f">
							<text>{{item.jobEntity.number - item.jobEntity.residueNumber}}人已赚</text>
							<text class="re_margin">剩{{item.jobEntity.residueNumber}}个名额</text>
						</view>
					</view>

				</view>
				<view class="re_price f_shrink0">赏{{item.amount}}金币</view>
			</view>
			<view v-if="item.auditStatusType  == '10010001' || item.auditStatusType  == '10010005'" class="relase_btn_b  f f_align f_align_center">
				<view class="relase_item_handle" @click="examineCancel">取消任务</view>
				<view class="relase_item_handle blue" @click="doExamineSub(item)">继续提交</view>
			</view>

			<view class="icon_r_tips">
				<i :class="item.auditStatusType  == '10010004' ? 'iconfont iconzu5326 success' : 'iconfont iconzu5326'"></i>
				<text class="t_text">{{$getDict(audit_status_type,item.auditStatusType)}}</text>
			</view>
		</view>

		<!-- 加载 -->
		<loadMore :isLoading="isLoading" :isDone="isDoneTask" />
	</view>
</template>

<script>
	import loadMore from '@/components/loadMore/loadMore'
	import { mapState } from 'vuex';
	export default {
		components:{
			loadMore
		},
		data() {
			return {
				isLoading:false,
				isDoneTask:false,

				myTask:[],
				page:{
					pageIndex:1,
					limit:10,
					totalPage:0
				},
			};
		},
		onLoad() {
			this.$store.dispatch('getDictlists','audit_status_type');
		},
		onShow() {
			this.getTaskList();
		},
		computed:{
			...mapState({
				audit_status_type:state => state.dictArrs.audit_status_type
			})
		},
		methods:{
			//查询我的任务
			async getTaskList(){
				const _this = this;
				_this.isLoading = true;
				_this.isDoneTask = false;

				let res = (await _this.$http('/api/auth/job/listReceiveEntity','POST',{
					page:_this.page.pageIndex,
					limit:_this.page.limit
				})).data;
				uni.stopPullDownRefresh();
				_this.isLoading = false;
				if(res && res.code == '0'){
					let list = res.data.list;
					_this.page.totalPage = res.data.totalPage;
					if(_this.page.pageIndex <= 1){
						_this.myTask.splice(0);
					}
					if(_this.page.totalPage <= _this.page.pageIndex){
						_this.isDoneTask = true;
					}else{
						_this.isDoneTask = false;
					}
					_this.myTask = _this.myTask.concat(list);
				}else{
					_this.$showToast(res.msg);
				}
			},
			//继续
			doExamineSub(item){
				const _this = this;
				_this.$navTo(`../taskDetail/taskDetail?jobId=${item.jobId}`);
			},
			//取消任务
			examineCancel(item){
				const _this = this;
				uni.showActionSheet({
					itemList:['确定要取消当前任务嘛？'],
					success() {

					}
				})
			},
		},
		onPullDownRefresh() {
			this.page.pageIndex = 1;
			this.getTaskList();
		},
		//滚动到底部
		onReachBottom() {
			const _this =this;
			if(_this.page.pageIndex < _this.page.totalPage){
				_this.page.pageIndex++;
				_this.getTaskList();
			}else{
				_this.isDoneTask = true;
			}
		}
	}
</script>

<style lang="scss" class="myTask">
	.myTask{
		box-sizing: border-box;
		width: 100%;
		min-height: 100vh;
		background-color: #F6F6F6;
		padding: 24rpx;
		.my_task_item{
			background-color: #fff;
			padding: 48rpx 24rpx 0;
			box-shadow: 0 4rpx 12rpx $ych_color;
			margin-bottom: 24rpx;
			border-radius: 12rpx;

			font-size: 24rpx;
			color: #999999;
			position: relative;
			.icon_r_tips{
				position: absolute;
				top:0;right: 0;
				width: 104rpx;
				height: 54rpx;
				@include flex_center;
				.iconfont{
					font-size: 54rpx;
					&.success{
						color: $ych_color;
					}
					&.fail{
						color: #EB4D54;
					}
				}
				.t_text{
					position: absolute;
					font-size: 20rpx;
					color: #fff;
				}
			}
			.head_img{
				width: 90rpx;height: 90rpx;
				margin-right: 26rpx;
				&.radius{
					image{border-radius: 50%;}
				}
			}
			.re_name{
				font-size: 32rpx;
				color: #1A1A1A;
			}
			.re_margin{
				margin-left: 96rpx;
			}
			.re_price{
				font-size: 32rpx;
				color: #E6212A;
			}
			.relase_btn_b{
				padding: 24rpx 0;
				border-top: solid 1rpx #E6E6E6;
				.relase_item_handle{
					width: 50%;
					text-align: center;
					border-left:solid 1rpx #E6E6E6;
					&:first-child{
						border-left: none;
					}
					&.blue{
						color: $ych_color;
					}
				}
			}
		}
		.my_w_line{
			padding-bottom: 24rpx;
		}

	}
</style>
